<template>
  <div class="home">
    <div class="Box">
      <div class="title">
        <el-image style="width: 24px; height: 23px;" :src="require('../assets/images/work.png')" />
        <div class="text">工作台 <div class="line">&nbsp;</div>
        </div>
      </div>
      <div class="user">
        <el-image style="width: 60px; height: 60px;" :src="require('../assets/images/userPicture.png')"></el-image>
        <div class="text">HI! {{ userName }}，欢迎登录威士丁平台</div>
      </div>
      <div class="itemBox">
        <!-- 订餐情况 -->
        <div class="item imgC">
          <div class="topTitle">
            <div class="frame">&nbsp;</div> 订餐情况（单位：人）
          </div>
          <div style="display: flex;justify-content: space-between; padding: 30px;box-sizing: border-box;">
            <div style="text-align: center;">
              <div style="font-size: 30px;">{{ leaveData.mealLeaves }}</div>
              <div>订餐人数</div>
            </div>
            <div style="text-align: center;">
              <div style="font-size: 30px;">{{ leaveData.diningLeaves }}</div>
              <div>就餐人数</div>
            </div>
            <div style="text-align: center;">
              <div style="font-size: 30px;">{{ leaveData.stopLeaves }}</div>
              <div>停餐人数</div>
            </div>
          </div>
        </div>
        <!-- 请假情况 -->
        <div class="item imgB">
          <div class="topTitle">
            <div class="frame">&nbsp;</div> 请假情况（单位：人）
          </div>
          <div style="display: flex;justify-content: space-between; padding: 30px;box-sizing: border-box;">
            <div style="text-align: center;">
              <div style="font-size: 30px;">{{ leaveData.totalLeaves }}</div>
              <div>请假人数</div>
            </div>
            <div style="text-align: center;">
              <div style="font-size: 30px;">{{ leaveData.sickLeaves }}</div>
              <div>病假人数</div>
            </div>
            <div style="text-align: center;">
              <div style="font-size: 30px;">{{ leaveData.personalLeaves }}</div>
              <div>事假人数</div>
            </div>
          </div>
        </div>
        <!-- 退费情况 -->
        <div class="item imgA">
          <div class="topTitle">
            <div class="frame">&nbsp;</div> 退费情况（单位：人）
          </div>
          <div style="display: flex;justify-content: space-between; padding: 30px;box-sizing: border-box;">
            <div style="text-align: center;">
              <div style="font-size: 30px;">30000</div>
              <div>申请退费</div>
            </div>
            <div style="text-align: center;">
              <div style="font-size: 30px;">30000</div>
              <div>已退费</div>
            </div>
            <div style="text-align: center;">
              <div style="font-size: 30px;">30000</div>
              <div>未退费</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 待办事项、常用事项 -->
    <div class="twoBox">
      <!-- 常用事项 -->
      <div class="right" style="width: 790px; background-color: #fff;padding: 0;">
        <div class="title" style="padding: 10px;box-sizing: border-box;">
          <el-image style="width: 24px; height: 23px;" :src="require('../assets/images/affair.png')" />
          <div class="text">常用事项 <div class="line">&nbsp;</div></div>
        </div>
        <div class="box">
          <router-link to="/notice" class="router">
            <el-image style="width: 40px;height: 40px;" :src="require('@/assets/images/noticeIcon.png')"></el-image>
            <div>通知</div>
          </router-link>
          <router-link to="/leaveSystem/leaveRecord" class="router">
            <el-image style="width: 40px;height: 40px;" :src="require('@/assets/images/leaveIcon.png')"></el-image>
            <div>请假审批记录</div>
          </router-link>
          <router-link to="/financialManagement/refundFlow" class="router">
            <el-image style="width: 40px;height: 40px;" :src="require('@/assets/images/refundIcon.png')"></el-image>
            <div>退款流水</div>
          </router-link>
          <router-link to="/financialManagement/rechargeFlow" class="router">
            <el-image style="width: 40px;height: 40px;" :src="require('@/assets/images/rechargeIcon.png')"></el-image>
            <div>充值流水</div>
          </router-link>
          <router-link to="/financialManagement/financialOverview" class="router">
            <el-image style="width: 40px;height: 40px;" :src="require('@/assets/images/financeIcon.png')"></el-image>
            <div>财务概况</div>
          </router-link>
          <router-link to="/canteenSystem/orderingManagement" class="router">
            <el-image style="width: 40px;height: 40px;" :src="require('@/assets/images/mealsIcon.png')"></el-image>
            <div>订餐管理</div>
          </router-link>
        </div>
      </div>
      <!-- 待办事项 -->
      <div class="left" style="width: 790px;">
        <div class="title" style="padding: 10px;box-sizing: border-box;">
          <el-image style="width: 24px; height: 23px;" :src="require('../assets/images/affair.png')" />
          <div class="text">待办事项 <div class="line">&nbsp;</div>
          </div>
        </div>
        <div>
          <el-table :data="agencyMatters" :show-header="false" :max-height="230" stripe style="width: 100%">
            <el-table-column prop="studentName" align="center" label="studentName" />
            <el-table-column prop="leaveCreatedAt" align="center" label="leaveCreatedAt" />
          </el-table>
        </div>
      </div>
    </div>
    <!-- 请假情况分析、退款情况 -->
    <div class="twoBox size">
      <!-- 请假情况分析 -->
      <div class="left" style="padding: 10px;box-sizing: border-box; height: 400px">
        <div class="title" style="display: flex;justify-content: space-between;">
          <div style="display: flex;">
            <el-image style="width: 24px; height: 23px;" :src="require('../assets/images/leave.png')" />
            <div class="text">请假情况分析 <div class="line">&nbsp;</div>
            </div>
          </div>
          <div style="display: flex;align-items: center;">
            <div style="display: flex;">
              <div class="z" @click="getLeaveData('WEEK')">周</div>
              <div class="y" @click="getLeaveData('MONTH')">月</div>
              <div class="n" @click="getLeaveData('YEAR')">年</div>
            </div>
            <!-- <div>
              <el-date-picker style="width: 80px;color: #000;margin-left: 5px;" :clearable="false" v-model="date"
                prefix-icon="1" type="month" format="yyyy年MM月" placeholder="选择日期" @blur="getLeaveData()" />
              <el-image style="width: 13px;height: 9px;" :src="require('../assets/images/san.png')"></el-image>
            </div> -->
          </div>
        </div>
        <div style="display: flex;justify-content: center;">
          <!-- 请假情况分析图表 -->
          <div id="leaveChart" class="chart" style="width: 900px;"></div>
        </div>
      </div>
      <!-- 退款情况 -->
      <div class="right" style=" height: 400px">
        <div class="title" style="display: flex;justify-content: space-between;">
          <div style="display: flex;">
            <el-image style="width: 24px; height: 23px;" :src="require('../assets/images/refund.png')" />
            <div class="text">退款情况 <div class="line">&nbsp;</div>
            </div>
          </div>
          <div style="display: flex;align-items: center;">
            <div style="display: flex;">
              <div class="z">周</div>
              <div class="y">月</div>
              <div class="n">年</div>
            </div>
            <!-- <div>
              <el-date-picker style="width: 80px;color: #000;margin-left: 5px;" :clearable="false" v-model="date"
                prefix-icon="1" type="month" format="yyyy年MM月" placeholder="选择日期" />
              <el-image style="width: 13px;height: 9px;" :src="require('../assets/images/san.png')"></el-image>
            </div> -->
          </div>
        </div>
        <div style="display: flex;justify-content: center;">
          <!-- 退款情况图表 -->
          <div id="refundChart" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getUserProfile } from "@/api/system/user";
import { getLeaveStatisticsProvider, getLeave, getStudetNumber, getAgencyMatters } from "@/api/index";
export default {
  name: "Index",
  data () {
    return {
      // 用户名
      userName: "",
      //请假选择的日期
      date: '',
      //请假人数
      leaveData: {
        totalLeaves: "0",
        sickLeaves: '0',
        personalLeaves: "0",
        diningLeaves: "0",
        stopLeaves: "0",
        mealLeaves: "0"
      },
      //总人数
      studetNumber: "0",
      //待办事项
      agencyMatters: [],
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
        },
      ]
    };
  },
  moutead () {
    console.log("=======")
    // this.$store.dispatch('app/toggleSideBarHide', true);
    // document.querySelector('.navbar').style.display = "none";
    // document.querySelector('.tags-view-container').style.display = "none"
  },

  created () {
    setTimeout(() => {
      this.getLeaveData('WEEK')
      this.getRefundData()
    }, 100)
    this.getUser()
    this.getLeaveList()
  },
  methods: {
    //请假信息
    async getLeaveList () {
      //获取今天的请假情况
      let resLeave = await getLeave()
      if (resLeave.data) {
        this.leaveData = resLeave.data
      }
      //获取学校人数
      let StudetNumber = await getStudetNumber()
      this.studetNumber = StudetNumber.data
      //获取待办事项
      let AgencyMatters = await getAgencyMatters()
      let arr = []
      AgencyMatters.data.leaveCounts.forEach(item => {
        let date = new Date(item.leaveCreatedAt)
        if (date.getFullYear() == new Date().getFullYear() && date.getMonth() + 1 == new Date().getMonth() + 1 && date.getDate() == new Date().getDate()) {
          arr.push({ leaveCreatedAt: "今天" + date.getHours() + ":" + date.getMinutes(), studentName: item.studentName })
        } else {
          arr.push({ leaveCreatedAt: date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + date.getHours() + ":" + date.getMinutes(), studentName: item.studentName })
        }
      })
      this.agencyMatters = arr
      console.log("res", AgencyMatters)
    },
    // 获取用户信息
    getUser () {
      getUserProfile().then(res => {
        this.userName = res.data.nickName
      })
    },
    //请假树状图
    async getLeaveData (Type) {
      let statisticType = {
        statisticType: "",
        year: "",
        month: ""
      }
      if (Type) {
        statisticType.statisticType = Type
        this.date = ""
      } else {
        let date = new Date(this.date)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        statisticType.year = y
        statisticType.month = m
        statisticType.statisticType = "MONTH"
        console.log(m, y)
      }
      await getLeaveStatisticsProvider(statisticType).then(res => {
        // console.log(res)
        let xAxis = []
        let name = ""
        if (Type == "WEEK") {
          res.data.labels.forEach(item => {
            xAxis.push(item.slice(0, 10))
          });
          name = "周"
        } else if (Type == "MONTH") {
          res.data.labels.forEach(item => {
            xAxis.push(item.slice(5, 7) + "月")
          });
          name = "月"
        } else if (Type == "YEAR") {
          res.data.labels.forEach(item => {
            xAxis.push(item + "年")
          });
          name = "年"
        }
        // console.log(xAxis)
        var myChart = echarts.init(document.getElementById('leaveChart'));
        var option;
        option = {
          xAxis: {
            type: 'category',
            name: name,
            data: xAxis
          },
          yAxis: {
            type: 'value',
            name: "请假人数",
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          series: [
            {
              name: "请假人数",
              data: res.data.values,
              type: 'bar',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#E91610' },
                  { offset: 1, color: '#F48103' }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#2378f7' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                  ])
                }
              },
            }
          ]
        };
        option && myChart.setOption(option);
      })
    },
    //退费折线图
    getRefundData () {
      var myChart = echarts.init(document.getElementById('refundChart'));
      var option;
      let colorArr = ["#A9DC74", "#6ACFEA", "#000"]
      let d = [
        {
          name: 'Line 1',
          type: 'line',
          // stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 5,
            color: colorArr[0],
            smooth: true,
            cap: "round"
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: '#FFF3DF'
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 200, 200, 334, 190, 0, 220]
        },
        {
          name: 'Line 12',
          type: 'line',
          // stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 5,
            color: colorArr[1],
            smooth: true,
            cap: "round"
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: '#FFF3DF'
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 100, 200, 334, 10, 130, 220]
        }
      ]
      option = {
        color: colorArr,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: d
      };
      option && myChart.setOption(option);
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.home {
  background-color: #F1F2F6;
  padding: 10px 0;
  box-sizing: border-box;
  overflow: auto;
}

.Box {
  width: 1602px;
  height: 337px;
  padding: 10px;
  box-sizing: border-box;
  margin: 10px auto 0;
  background-color: #fff;

  .title {
    display: flex;

    .text {
      margin-left: 10px;
      font-size: 16px;
      color: #000;
      position: relative;
      z-index: 0;

      .line {
        position: absolute;
        bottom: 0px;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 5px;
        border-radius: 5px;
        background-color: #FFCE80;
      }
    }
  }

  .user {
    margin-top: 10px;
    display: flex;
    align-items: self-end;

    .text {
      font-size: 30px;
      font-weight: 400;
    }
  }

  .itemBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;

    .item {
      width: 471px;
      height: 205px;
      padding: 20px 0;
      color: #fff;
      margin-top: 5px;
      box-sizing: border-box;
      background-repeat: no-repeat;

      .topTitle {
        display: flex;

        .frame {
          width: 12px;
          height: 26px;
          background-color: #fff;
          border-radius: 0 5px 5px 0;
          margin-right: 5px;
        }
      }
    }
  }
}

.twoBox {
  width: 1602px;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .left {
    width: 1034px;
    height: 271px;
    background-color: #fff;
  }

  .right {
    width: 544px;
    height: 271px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;

    // 常用事项
    .box {
      width: 790px;
      height: 226px;
      display: grid;
      grid-template-columns:repeat(3,1fr);
      gap: 10px;

      .router {
        background-color: #fff;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      }

      .router:hover {
        animation:identifier 1s infinite ;
        
      @keyframes identifier {
        0%{box-shadow: 0px 0px 0px 0px #eee;}
        100%{box-shadow: 0px 0px 20px 5px #999;}
      }
    }
  }
}

.chart {
  width: 800px;
  height: 350px;
  margin-top: 5px;
}

.title {
  display: flex;

  .text {
    margin-left: 10px;
    font-size: 16px;
    color: #000;
    position: relative;
    z-index: 0;

    .line {
      position: absolute;
      top: 15px;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 5px;
      border-radius: 5px;
      background-color: #FFCE80;
    }
  }
}

//请假情况分析、退款情况
.size {
  height: 400px;
}

//周
.z {
  width: 40px;
  height: 21px;
  border-radius: 10px;
  text-align: center;
  background-color: #FFCE80;
  cursor: pointer;
}

//月
.y {
  width: 40px;
  height: 21px;
  border-radius: 10px;
  text-align: center;
  background-color: #FFE2B3;
  cursor: pointer;
}

//年
.n {
  width: 40px;
  height: 21px;
  border-radius: 10px;
  text-align: center;
  background-color: #FFF8DF;
  cursor: pointer;
}

.imgC {
  width: 471px;
  height: 205px;
  background-image: url(../assets/images/imgC.png);
}

.imgB {
  width: 471px;
  height: 205px;
  background-image: url(../assets/images/imgB.png);
}

.imgA {
  width: 471px;
  height: 205px;
  background-image: url(../assets/images/imgA.png);
}

// 非斑马纹颜色
::v-deep .el-table tr {
  background: #FFF5E7;
}

// 修改斑马纹颜色
::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fff;
}

//
::v-deep.el-input--prefix .el-input__inner {
  padding: 3px;
  width: 80px;
}

::v-deep .el-input__inner {
  cursor: pointer;
  border: none;
}
</style>
